
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../../js/vue.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../../plugins/morris/morris.css">
    <link rel="stylesheet" href="../../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../../plugins/select2/select2.css">
    <link rel="stylesheet" href="../../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>

</head>
<style>
    .aa{
        align-content: center
    }
</style>

<body>

<div id="app">
    <br>
    <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
        <thead>
        <tr>
            <th class="text-center sorting">排名</th>
            <th class="text-center sorting">图书名称</th>
            <th class="text-center sorting">封面</th>
            <th class="text-center sorting">借阅次数</th>
            <th class="text-center sorting">图书类型</th>
            <th class="text-center sorting">作者名称</th>
            <th class="text-center sorting">出版社</th>
            <th class="text-center sorting">总数量</th>
            <th class="text-center sorting">操作</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="(brand,index) in brands" >
                <td class="text-center sorting aa">第{{index+1}}名</td>
                <td class="text-center sorting aa">{{brand.name}}</td>
                <td class="text-center sorting aa"><img v-bind:src="brand.imgpath" height="80px" width="50px"></td>
                <td class="text-center sorting aa">{{brand.card}}</td>
                <td class="text-center sorting aa">{{brand.type}}</td>
                <td class="text-center sorting aa">{{brand.author}}</td>
                <td class="text-center sorting aa">{{brand.press}}</td>
                <td class="text-center sorting aa">{{brand.num}}</td>
                <td class="text-center aa" v-if="brand.num>0">
                    <el-button type="primary"  v-on:click="borrowBooks(brand.bid)">预约</el-button>
                </td>
                <td class="text-center aa" v-if="brand.num<=0">
                    <el-button type="primary"  v-on:click="borrowBooks(brand.bid)" disabled>预约</el-button>
                </td>
            </tr>
        </tbody>
    </table>
    <!--    class="pageList"-->
<!--    <el-pagination-->
<!--            :page-sizes="[10, 20, 30, 40]"-->
<!--            :page-size="pageSize"-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            :total="counts"-->
<!--            @size-change="handleSizeChange"-->
<!--            :current-page.sync="page"-->
<!--            @current-change="handleCurrentChange"-->
<!--    ></el-pagination>-->


</div>

</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                brands:[],

            }
        },
        computed: {},
        created() {
            this.init()
            //this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },
        mounted(){
            this.findAll()
        },
        methods: {
            findAll(){
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/web/user/topBooks"
                }).then(function(resp){
                    _this.brands=resp.data;
                })
            },
            borrowBooks(bid){
                var _this=this;
                axios({
                    method: "post",
                    url: "/web/user/borrowbook",
                    data: "bid="+bid
                }).then(function (reps){
                    var i=reps.data;
                    if (i==1){//借书成功
                        _this.$message.success('预约成功！')
                        _this.findAll()
                    }else if (i==0) {
                        _this.$message.error('您已经借过这本书了！')
                    }else {
                        _this.$message.error('未知错误请联系管理员！')
                    }
                })
            }
        }
    })
</script>


</html>